import { Fragment } from '@/components/Fragment'; 
import { Accordion, View, Message } from '@aws-amplify/ui-react';

import {
  BasicSingleAccordion,
  BasicMultipleAccordion,
  ClassStylingAccordion,
  AlwaysOpenAccordionExample,
  ControlledSingleAccordion,
  CustomTitleComponent,
  DefaultAccordionExample,
  ExpandedByDefaultMultipleAccordion,
  StylePropsAccordion,
  AccordionThemeExample,
} from './examples';
import { AccordionDemo } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

<Message
  variation="filled"
  colorTheme="info">
  In Amplify UI v5 this was called Expander. We rebuilt it in v6 to use the browser native details and summary elements
</Message>

## Demo

<AccordionDemo />

## Usage

Import the Accordion and Accordion.Item components and styles.

<Example>
  <View>
    <DefaultAccordionExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/DefaultAccordionExample.tsx

```

  </ExampleCode>
</Example>

### Single or multiple

The accordion by default only allows 1 item to be displayed at a time. To allow multiple items to be opened at a time, add the `allowMultiple` prop.

<Example>
  <View>
    <BasicMultipleAccordion />
  </View>
  
  <ExampleCode>

```jsx file=./examples/BasicMultipleExample.tsx

```

  </ExampleCode>
</Example>


The default behavior allows opening a single item at once.

<Example>
  <View>
    <BasicSingleAccordion />
  </View>
  
  <ExampleCode>

```jsx file=./examples/BasicSingleExample.tsx

```

  </ExampleCode>
</Example>


### Always open

To allow for the accordion to always have at least 1 item open, set the `preventCollapse` to true.

<Example>
  <View>
    <AlwaysOpenAccordionExample />
  </View>
  
  <ExampleCode>

```jsx file=./examples/AlwaysOpenAccordionExample.tsx

```

  </ExampleCode>
</Example>

### Expanded by default

To expand specific items by default, pass a `string[]` of value(s) to the `defaultValue` prop. Each `Accordion.Item` should have a value string that lets the Accordion know which items are expanded. 

<Example>
  <View>
    <ExpandedByDefaultMultipleAccordion />
  </View>
  
  <ExampleCode>

```jsx file=./examples/ExpandedByDefaultMultipleExample.tsx

```

  </ExampleCode>
</Example>

### Controlled component

To use the Accordion as controlled component, specify the `value` of the item(s) to expand and use in conjunction with `onChange`.

<Example>
  <View>
    <ControlledSingleAccordion />
  </View>
  
  <ExampleCode>

```jsx file=./examples/ControlledSingleExample.tsx

```

  </ExampleCode>
</Example>

### Custom title component

For more control over the layout or styling of the Accordion item header, pass a custom component to the `<Accordion.Item>` title prop.

<Example>
  <View>
    <CustomTitleComponent />
  </View>
  <ExampleCode>
```jsx file=./examples/CustomTitleComponent.tsx

```
  </ExampleCode>
</Example>


## Styling

<ThemeExample component="Accordion">
  <Example>
    <AccordionThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/AccordionThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Accordion" />

### Global styling

To override styling on all Accordions, you can set the Amplify CSS variables with the built-in classes.

```css
/* styles.css */
.amplify-accordion {
  --amplify-components-accordion-background-color: var(--amplify-colors-primary-80);
}
```

<Example className="accordion-global-styling-example">
  <BasicSingleAccordion />
</Example>

### Local styling

To override styling on a specific Accordion, you can use (in order of increasing specificity): a class selector and style props.

_Using a class selector:_

```css
/* styles.css */
.my-accordion {
  background-color: var(--amplify-colors-primary-80);
  color: var(--amplify-colors-white);
}

.amplify-accordion__item__body {
  color: var(--amplify-colors-white);
}
```

<Example>
  <View>
    <ClassStylingAccordion />
  </View>
  
  <ExampleCode>

```jsx file=./examples/ClassStylingExample.tsx

```

  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <View>
    <StylePropsAccordion />
  </View>
  
  <ExampleCode>

```jsx file=./examples/StylePropsExample.tsx

```

  </ExampleCode>
</Example>
